<template>
  <div>
    <h3>Account Information</h3>

    <table style="width: 40%; margin: 0 auto;">
      <tr>
        <td>First name:</td>
        <td><input type="text" v-model="modelValue.firstName" /></td>
      </tr>
      <tr>
        <td>Last name:</td>
        <td><input type="text" v-model="modelValue.lastName" /></td>
      </tr>
      <tr>
        <td>Email:</td>
        <td>
          <input type="text" size="40" v-model="modelValue.email" @blur="checkEmail" />
          <span id="isProperEmail">{{ emailCheck }}</span>
        </td>
      </tr>
      <tr>
        <td>Phone:</td>
        <td>
          <input type="text" v-model="modelValue.phone" @blur="checkPhone" />
          <span id="isProperPhone">{{ phoneCheck }}</span>
        </td>
      </tr>
      <tr>
        <td>Address 1:</td>
        <td><input type="text" size="40" v-model="modelValue.address1" /></td>
      </tr>
      <tr>
        <td>Address 2:</td>
        <td><input type="text" size="40" v-model="modelValue.address2" /></td>
      </tr>
      <tr>
        <td>City:</td>
        <td><input type="text" v-model="modelValue.city" /></td>
      </tr>
      <tr>
        <td>State:</td>
        <td><input type="text" size="4" v-model="modelValue.state" /></td>
      </tr>
      <tr>
        <td>Zip:</td>
        <td><input type="text" size="10" v-model="modelValue.zip" /></td>
      </tr>
      <tr>
        <td>Country:</td>
        <td><input type="text" size="15" v-model="modelValue.country" /></td>
      </tr>
    </table>

    <h3>Profile Information</h3>

    <table style="width: 40%; margin: 0 auto;">
      <tr>
        <td>Language Preference:</td>
        <td>
          <select v-model="modelValue.langpref">
            <option value="english">English</option>
            <option value="chinese">Chinese</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>Favourite Category:</td>
        <td>
          <select v-model="modelValue.favcategory">
            <option value="MAIN">MAIN</option>
            <option value="SOUTH">SOUTH</option>
            <option value="NEW">NEW</option>
          </select>
        </td>
      </tr>

      <tr>
        <td>Enable MyList</td>
        <td>
          <label>
            <input type="radio" v-model="modelValue.mylistopt" :value="1" />Yes
          </label>
          <label>
            <input type="radio" v-model="modelValue.mylistopt" :value="0" />No
          </label>
        </td>
      </tr>
      <tr>
        <td>Enable MyBanner</td>
        <td>
          <label>
            <input type="radio" v-model="modelValue.banneropt" :value="1" />Yes
          </label>
          <label>
            <input type="radio" v-model="modelValue.banneropt" :value="0" />No
          </label>
        </td>
      </tr>
    </table>
  </div>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits } from 'vue'

interface AccountForm {
  firstName: string
  lastName: string
  email: string
  phone: string
  address1: string
  address2: string
  city: string
  state: string
  zip: string
  country: string
  langpref: 'english' | 'chinese'
  favcategory: 'MAIN' | 'SOUTH' | 'NEW'
  mylistopt: 0 | 1
  banneropt: 0 | 1
}

const props = defineProps<{
  modelValue: AccountForm
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: AccountForm): void
}>()

const emailCheck = ref('')
const phoneCheck = ref('')

const checkEmail = () => {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  emailCheck.value = emailRegex.test(props.modelValue.email) ? '✓' : '✗'
}

const checkPhone = () => {
  const phoneRegex = /^\d{10,}$/
  phoneCheck.value = phoneRegex.test(props.modelValue.phone) ? '✓' : '✗'
}
</script>
